<template>
	<div class="warper">
		<div class="title">
			<div :class="[fixed]" class="guess">
				猜你喜欢
			</div>
		</div>
		<div class="content" v-for="item of guessList" :key="item.id">
			<div class="top">
				<div class="top-img">
					<img :src="item.imgUrl">
				</div>
				<div class="top-desc">
					<span>{{item.crite}}</span>
				</div>
			</div>
			<div class="middel">
				{{item.desc}}
			</div>
			<div class="bottom">
				<p>酒店距离景点{{item.distance}}km</p>
				<span>¥</span><span>{{item.prise}}</span>起
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "homeGuess",
		data() {
			return {
				fixed: "",
				guessList: [
					{
						"id": "0004",
						"imgUrl": "https://pic3.40017.cn/zzy/rimage/2015/03/17/11/506Nl6_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "【引爆双早双晚399】扬州中集格兰云天大酒店+自选瘦西湖/个园/瘦西湖温泉+双人早餐",
						"distance": "1.34",
						"prise": "269"
					},
					{
						"id": "0005",
						"imgUrl": "https://pic3.40017.cn/zzy/rimage/2015/04/18/17/hETxTo_420x228_00.jpg",
						"crite": "8点评  100%满意度",
						"desc": "上海崇明东平国家森林公园房车1晚+森林公园门票2张+双人早餐",
						"distance": "7.00",
						"prise": "299"
					},
					{
						"id": "0006",
						"imgUrl": "https://pic5.40017.cn/02/000/02/22/rBLkCVlkdDqAP4NzAAMCZSYX5mY633_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "无锡拈花客栈1晚，游拈花湾，自选酒店自助晚餐/禅食餐【灵山胜境】【亲子精选】",
						"distance": "1.34",
						"prise": "289"
					},
					{
						"id": "0008",
						"imgUrl": "https://pic3.40017.cn/zzy/rimage/2015/03/17/12/ua9Ic2_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "游黄山，自选景区内山顶酒店（北海/狮林/白云/西海/排云楼/光明顶）",
						"distance": "134",
						"prise": "249"
					},
					{
						"id": "0009",
						"imgUrl": "https://pic3.40017.cn/zzy/rimage/2015/03/26/20/qLpvQc_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "住宋城千古情主题酒店（杭州西湖店），自选杭州宋城千古情景区，预订套餐包含贵宾席演出票！",
						"distance": "14",
						"prise": "69"
					},
					{
						"id": "00011",
						"imgUrl": "https://pic3.40017.cn/zzy/rimage/2015/03/24/17/oc97dU_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "住景区内西塘华源轩主题客栈，游西塘古镇，感受温柔淳朴的古镇韵味【错峰避人群、更优惠】",
						"distance": "14",
						"prise": "669"
					},
					{
						"id": "00012",
						"imgUrl": "https://pic5.40017.cn/02/000/2b/df/rBLkCFqTxOaAbkgzAAHHOxTJQLg483_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "【引爆双早双晚399】住扬州中集格兰云天大酒店+自选双人晚餐/瘦西湖温泉+双人早餐",
						"distance": "14",
						"prise": "399"
					},
					{
						"id": "00013",
						"imgUrl": "https://pic5.40017.cn/01/001/88/2b/rBANC1pcSaeAHwylAALZx0R6pkw234_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "【近南山竹海】住溧阳南山康鸿度假酒店，自选天目湖南山竹海/天目湖御水温泉/天目湖山水园等",
						"distance": "145",
						"prise": "6955"
					},
					{
						"id": "00014",
						"imgUrl": "https://pic4.40017.cn/scenery/destination/2016/07/19/17/lziIen_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "常州明都枫泽山庄大酒店1晚，自选淹城野生动物园景点/常州明都枫泽山庄大酒店自助晚餐套餐",
						"distance": "14",
						"prise": "69"
					},
					{
						"id": "00015",
						"imgUrl": "https://pic5.40017.cn/02/000/54/fb/rBANDFtHJ3yAE7pWAAE0a3dx4Zo142_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "入住句容碧桂园凤凰城酒店+双份自助早餐+自选汤山一号温泉/颐尚温泉/紫清湖温泉",
						"distance": "14",
						"prise": "69"
					},
					{
						"id": "00016",
						"imgUrl": "https://pic4.40017.cn/scenery/destination/2017/02/08/18/ZTe8Qb_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "宿宜兴帕佛伦斯酒店，自选宜兴竹海风景区等，尊享60楼“云端”自助早餐，免费泳池健身房【亲子精选】",
						"distance": "154",
						"prise": "629"
					},
					{
						"id": "00018",
						"imgUrl": "https://pic4.40017.cn/scenery/destination/2017/01/23/17/XeJ3ph_420x228_00.jpg",
						"crite": "18点评  100%满意度",
						"desc": "住上海柏思特酒店，享儿童乐园，游上海迪士尼乐园【亲子精选】【亲子主题】",
						"distance": "14",
						"prise": "869"
					}
				]
			}
		},
		methods:{
			scrollChange(){
				let height = document.documentElement.scrollTop
				if(height>600){
					this.fixed = "fixed"
					
				}
				else{
					this.fixed = ""
				}
			}
		},
		mounted() {
			window.addEventListener("scroll",this.scrollChange)
		}
	}
</script>

<style>
	.fixed{
		position: fixed;
		top: .9rem;
		left: 40%;
		z-index: 100;
	}
	.warper {
		width: 100%;
		border-top: .2rem solid #eee;
	}

	.title {
		text-align: center;
		width: 98%;
		height: 0;
		overflow: hidden;
		padding-bottom: 10%;
		border-bottom: .06rem solid #EEEEEE;
		margin-bottom: .12rem;
	}
	.guess {
		margin: 0 auto;
		overflow: hidden;
		width: 25%;
		height: 0;
		padding-bottom: 6%;
		padding-top: .23rem;
		border-bottom: .1rem solid #23beae;
	}

	.top {
		width: 98%;
		height: 0;
		overflow: hidden;
		padding-bottom: 50%;
		position: relative;
		margin: 0 auto;
	}

	.top-img>img {
		width: 100%;
	}

	.top-desc {
		position: absolute;
		top: 3.2rem;
		left: .3rem;
	}

	.top-desc>span {
		display: inline-block;
		color: white;
		font-weight: bold;
	}

	.middel {
		font-size: .3rem;
		font-weight: bold;
		width: 98%;
		margin: .2rem auto;
	}

	.bottom {
		width: 98%;
		margin: 0 auto;
		margin-bottom: .3rem;
	}

	.bottom p {
		display: inline-block;
		color: #aaa79b;
		font-size: .3rem;
		margin-right: 3.2rem;
	}

	.bottom span {
		color: #c8282a;
	}

	.bottom span:nth-child(3) {
		font-size: .4rem;
		padding-left: .1rem;
		font-weight: bold;
	}
</style>
